import * as React from 'react';
import { View, Modal, StyleSheet, Text, TouchableOpacity} from 'react-native';
import Portal from '../Portal/portal';

function BasicModal(props){
  const { isVisible,onClose, title="标题", titleStyle = {},content=" This is a modal",contentStyle = {}, footerItems } = props;
 
  const [visible,setVisible] = React.useState(false);

  function showModal(){
    setVisible(true);
  }

  function hideModal(){
    setVisible(false);
  }

  return (
    <View style={styles.container}>
      <Modal
        animationType="fade"
        transparent={true}
        visible={isVisible}
        onRequestClose={onClose}>
        <View style={styles.modalContainer}>
          {title && (
            <View style={styles.titleContainer}>
              <Text style={[styles.title, titleStyle]}>{title}</Text>
            </View>
          )}

          {content && (
            <View style={styles.contentContainer}>
              <Text style={[styles.content, contentStyle]}>{content}</Text>
            </View>
          )}

          {footerItems && (
            <View style={styles.modalFooter}>
              {footerItems.map((item, index) => (
                <TouchableOpacity
                  key={index}
                  style={[styles.footerItem, index === 0 ? styles.leftItem : {}]}
                  onPress={() => {
                    item.onPress();
                    onClose();
                  }}>
                  <Text style={styles.footerText}>{item.text}</Text>
                </TouchableOpacity>
              ))}
            </View>
          )}
        </View>
      </Modal>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    position: "ablosute",
    left:0,
    right:0,
    top:200,
    bottom:0,
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    // backgroundColor: 'rgba(0,0,0,0.6)',
    backgroundColor: '#1e1e1e',
  },
  modalContainer: {
    position: "ablosute",
    left:0,
    right:0,
    top:0,
    bottom:0,
    backgroundColor: 'white',
    borderRadius: 8,
    padding: 16,
    justifyContent: 'center',
    alignItems: 'center',
    maxWidth: '80%', // 限制最大宽度，防止内容过大时超出屏幕
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.25,
    shadowRadius: 4,
    elevation: 5,
  },
  title: {
    fontSize: 18,
    fontWeight: 'bold',
    marginBottom: 8,
  },
  titleContainer: {
    alignItems: 'center',
    paddingBottom: 16,
  },
  content: {
    fontSize: 16,
    color: '#333',
    textAlign: 'center',
  },
  contentContainer: {
    paddingTop: 16, // 添加一些顶部间距
    paddingBottom: 16, // 底部间距以确保内容能够铺满模态框
  },
  modalFooter: {
    flexDirection: 'row',
    marginTop: 16,
    borderTopWidth: StyleSheet.hairlineWidth,
    borderColor: '#ccc',
    paddingTop: 8,
  },
  footerItem: {
    flex: 1,
    alignItems: 'center',
    paddingVertical: 8,
  },
  leftItem: {
    borderRightWidth: StyleSheet.hairlineWidth,
    borderRightColor: '#ccc',
  },
  footerText: {
    fontSize: 16,
    color: '#007AFF',
  },
});
export { BasicModal };